<script setup lang="ts">
	import { ref } from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import dayjs from 'dayjs'
	import type {
		FormInstance,
		TabsPaneContext,
	} from 'element-plus'
	import memberApi from '@/api/zhitan/users.ts'
	import GetCoupon from './getcoupon.vue'
	import useUserStore from '@/store/modules/user'


	const userStore : any = useUserStore()

	const router = useRouter()
	const activeleft : any = ref([0, 0])
	const switch1 = ref(1)
	const switch2 = ref(0)
	const showGetCoupon = ref(false)
	const autotitle = ref('权限配置')

	const show : any = ref({
		addAndModify: false,
	})
	const infoform : any = ref(false)
	const form : any = ref({})
	const formRef = ref<FormInstance>()
	const formRules = ref({
		name: [{
			required: true,
			message: '请输入企业名称',
			trigger: 'blur',
		}],
		address: [{
			required: true,
			message: '请输入企业地址',
			trigger: 'blur',
		}],
	})
	const topIndex : any = ref(1)
	watch(() => topIndex.value, (val : any) => {
		required_list(true)
	})
	const topList : any = ref([
		{
			id: 1,
			name: '全部用户',
			value: 1,
			num: 0,
			key: 'all_num',
		},
		// {
		//   id: 2,
		//   name: '已认证',
		//   value: 2,
		//   num: 0,
		//   key: 'auth_num',
		// },
		{
			id: 2,
			name: '黑名单',
			value: 2,
			num: 0,
			key: 'blacklist_num',
		},
	])
	const checkList : any = ref([])
	const tableData : any = ref([
		{
			id: 1,
			name: '等级1',
			code: 'name1',
			sort: 1,
			desc: '备注',
			create_time: '2024-2-23 14:00:00',
			update_time: '2024-2-23 16:00:00',
		},
		{
			id: 1,
			name: '等级2',
			code: '',
			sort: 1,
			desc: '备注',
			create_time: '2024-2-23 14:00:00',
			update_time: '2024-2-23 16:00:00',
		},
		{
			id: 1,
			name: '等级3',
			code: 'name3',
			sort: 1,
			desc: '',
			create_time: '2024-2-23 14:00:00',
			update_time: '2024-2-23 16:00:00',
		},
	])
	const leftData : any = ref([
		{
			create_user: 1,
			create_user_name: '超管',
			id: 1,
			name: '全部',
			pid: 52,
			sort: 1,
		},
		{
			code: '1',
			create_user: 1,
			create_user_name: '超管',
			id: 2,
			name: '黑名单',
			pid: 52,
			sort: 1,
		},
	])
	const loadingRef : any = ref(null)
	const paging : any = ref({
		page: 1,
		limit: 10,
	})
	const total : any = ref(0)

	const dialogVisible = ref(false)
	onMounted(() => {
		get_stat()
		required_list(true)
	})
	const dataList : any = ref([]) // 数据列表
	function required_list(loaging : any) {
		// if (loaging) {
		//   loadingRef.value.open(true)
		// }
		switch (Number(topIndex.value)) {
			case 1:
				paging.value.status = 1
				break
			case 2:
				paging.value.status = 2
				break
			case 3:
				paging.value.status = 0
				delete paging.value.is_real_auth
				break
		}
		memberApi.AppletUser_list(paging.value).then((res : any) => {
			total.value = res.count
			if (loaging) {
				loadingRef.value.open(200)
			}
			dataList.value = res.data
		})
	}
	function get_stat() {
		memberApi.AppletUser_list({ page: 1, limit: 1, status: 1 }).then((res : any) => {
			topList.value[0].num = res.count
		})
		memberApi.AppletUser_list({ page: 1, limit: 1, status: 2 }).then((res : any) => {
			topList.value[1].num = res.count
		})
	}
	// 修改
	const isedit : any = ref(null)

	function modify(item : any, key : any) {
		switch (key) {
			case '查看':
				form.value = {}
				form.value = Object.assign({}, item)
				dialogVisible.value = true
				break
			case 'status':
				memberApi.AppletUser_edit({
					id: item.id,
					status: item.status == 1 ? 2 : 1,
				}).then((res : any) => {
					ElMessage({
						type: 'success',
						message: res.msg,
					})
					required_list(false)
					get_stat()
				})
				break
		}
	}
	function openEdit() {
		isedit.value = false
		dialogVisible.value = !dialogVisible.value
		form.value = {}
	}
	function submitForm() {
		dialogVisible.value = false
	}
	function removeBatch(row : any) {
		tableData.value.forEach((element : any, index : any) => {
			if (element.id === row) {
				tableData.value.splice(index, 1)
			}
		})
	}
	function changeleft(i : any, j : any) {
		activeleft.value = [0, j]
	}
	// 分页代码
	function pagChange(e : any) {
		paging.value = Object.assign(paging.value, e)
		required_list(false)
	}
	function searchCoupon(row : any) {
		if (!userStore.permissions.includes('membersearchcoupon')) {
			ElMessage({
				type: 'info',
				message: '抱歉，您没有查看可用优惠券的权限！',
			})
			return
		}

		infoform.value = row
		showGetCoupon.value = true
	}
</script>

<template>
	<div class="absolute-container">
		<PageHeader>
			<template #title>
				<div class="custom-style">
					<el-segmented v-model="topIndex" :options="topList" class="custom-style">
						<template #default="{ item }">
							<div class="flex flex-col items-center gap-2 p-2">
								<div>{{ item.name }}({{ item.num }})</div>
							</div>
						</template>
					</el-segmented>
				</div>
			</template>
		</PageHeader>
		<page-main style="position: relative;">
			<Loading ref="loadingRef" />
			<div class="d-c flex">
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="用户昵称:">
						<el-input v-model="paging.nick_name" clearable placeholder="输入用户昵称"
							@clear="paging.nick_name = null" />
					</el-form-item>
					<el-form-item label="手机号:">
						<el-input v-model="paging.phone" clearable placeholder="输入手机号" @clear="paging.phone = null" />
					</el-form-item>
					<!-- <el-form-item label="状态" style="width: 200px;">
            <el-select v-model="paging.status" clearable placeholder="请选择状态" @clear="paging.status = null">
              <el-option label="正常" value="1" />
              <el-option label="禁用" value="0" />
            </el-select>
          </el-form-item> -->
					<!-- <el-form-item label="注册日期:">
            <el-date-picker
              v-model="paging.date" type="daterange" clearable range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" value-format="x" @clear="paging.date = null"
            />
          </el-form-item> -->
					<el-form-item>
						<el-button type="primary" @click="required_list(true)">
							<template #icon>
								<svg-icon name="ep:search" />
							</template>
							查询
						</el-button>
						<el-button @click="paging = {
                page: 1,
                limit: 10,
                nick_name: null,
              }, required_list(true)">
							重置
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table :data="dataList" highlight-current-row border height="100%">
				<el-table-column prop="id" label="ID" width="60" align="center" />
				<el-table-column prop="name" label="用户信息" min-width="200" align="left">
					<template #default="{ row: i }">
						<div class="aic flex">
							<div class="jcc aic flex">
								<image-preview :src="i.avatar" :width="34" :height="34" style="margin-right: 4px;" />
							</div>
							<div class="fdc ml-2 flex">
								<div>
									{{ i.nick_name || '未知昵称' }}
								</div>
								<div>
									{{ i.phone || '未授权手机号' }}
								</div>
							</div>
						</div>
					</template>
				</el-table-column>

				<el-table-column prop="partner_status" label="可用优惠券数量" width="140" align="center">
					<template #default="{ row: i }">
						<div class="cursor-pointer bghover" @click="searchCoupon(i)">{{i.coupon_num||0}}</div>
					</template>
				</el-table-column>
				<el-table-column prop="partner_status" label="累计积分" width="100" align="center">
					<template #default="{ row: i }">
						{{i.score||0}}
					</template>
				</el-table-column>
				<el-table-column prop="partner_status" label="会员等级" width="100" align="center">
					<template #default="{ row: i }">
						{{i.level}}
					</template>
				</el-table-column>
				<el-table-column prop="partner_status" label="订单数量" width="100" align="center">
					<template #default="{ row: i }">
						{{i.order_num||0}}
					</template>
				</el-table-column>
				<el-table-column prop="partner_status" label="总交易额" width="100" align="center">
					<template #default="{ row: i }">
						{{i.order_money/100}}
					</template>
				</el-table-column>
				<!-- <el-table-column prop="join_time" label="加入分销商时间" width="180" align="center">
		  <template #default="{ row: i }">
		    {{i.join_time>0? dayjs(i.join_time * 1000).format('YYYY-MM-DD HH:mm:ss'):'' }}
		  </template>
		</el-table-column>
		<el-table-column prop="send_time" label="发放拉新奖励时间" width="180" align="center">
		  <template #default="{ row: i }">
		    {{i.send_time>0? dayjs(i.send_time * 1000).format('YYYY-MM-DD HH:mm:ss'):'' }}
		  </template>
		</el-table-column> -->

				<el-table-column prop="status" label="状态" width="100" align="center">
					<template #default="{ row: i }">
						<div v-if="i.status == 1" class="css-new-status">
							<div class="left-box" />
							<div>正常</div>
						</div>
						<div v-else class="css-new-status" :style="{ '--color': '#f56C6C' }">
							<div class="left-box" />
							<div>停用</div>
						</div>
					</template>
				</el-table-column>


				<el-table-column prop="desc" label="添加时间" width="180" align="center">
					<template #default="{ row: i }">
						{{ dayjs(i.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="140" align="center">
					<template #default="{ row: i }">
						<!-- <el-dropdown split-button trigger="click">
							<div class="flex items-center justify-center" @click="modify(i, '查看')">
								查看
							</div>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item>
										<el-button type="primary" text @click="modify(i, 'status')">
											{{ i.status ? '禁用' : '启用' }}
										</el-button>
									</el-dropdown-item> 
								</el-dropdown-menu>
							</template>
						</el-dropdown> -->
						<el-popconfirm :title="`确定${i.status===1 ? '禁用' : '启用'}吗？`" @confirm="modify(i, 'status')"
							v-if="userStore.permissions.includes('membersearchstatus')">
							<template #reference>
								<el-button :type="i.status===1?'danger':'success'" text>
									{{ i.status===1 ? '禁用' : '启用' }}
								</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<page-compon :page="paging.page" :size="paging.limit" :total="total" style="margin-top: 16px;"
				@pag-change="pagChange" />
		</page-main>
		<HDialog v-model="dialogVisible" title="">
			<div style="padding: 0 18px;">
				<el-form ref="formRef" :model="form" :rules="formRules" label-position="top" label-width="100px">
					<el-form-item label="头像：" class="avatar" prop="avatar">
						<image-upload v-model:url="form.avatar" name="file" :width="100" :height="100" />
					</el-form-item>
					<el-row :gutter="24">
						<el-col :span="12">
							<el-form-item label="昵称" prop="name">
								<el-input v-model="form.nick_name" size="large" placeholder="请输入昵称" clearable />
							</el-form-item>
						</el-col>
						<!-- <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" size="large" placeholder="请输入姓名" clearable />
              </el-form-item>
            </el-col> -->
						<el-col :span="12">
							<el-form-item label="手机号" prop="name">
								<el-input v-model="form.phone" size="large" placeholder="请输入手机号" clearable />
							</el-form-item>
						</el-col>
						<!--  <el-col :span="12">
              <el-form-item label="性别" prop="name">
                <el-select v-model="form.sex" placeholder="请选择" size="large">
                  <el-option label="男" :value="1" />
                  <el-option label="女" :value="2" />
                </el-select>
              </el-form-item>
            </el-col> -->
					</el-row>
				</el-form>
			</div>
			<!-- <template #footer>
        <div class="fotterbtn">
          <el-button class="cancel" @click="dialogVisible = false, form = {} ">
            取消
          </el-button>
          <el-button type="primary" @click="submitForm">
            保存
          </el-button>
        </div>
      </template> -->
		</HDialog>
		<GetCoupon v-if="showGetCoupon" v-model="showGetCoupon" :infoform="infoform" />
	</div>
</template>

<style lang="scss" scoped>
	@import "@/assets/styles/tool";

	.bghover:hover {
		color: #409eff;
	}
</style>